<template>
  <div class="common-title">
    <div class="common-title__left">
      <div class="common-title__square"></div>
      <div class="common-title__content">{{title}}</div>
    </div>
    <div class="common-title__slot" v-if="slotStr">
      <slot name="slotStr"></slot>
    </div>
    <div class="common-title__right" v-show="suffixIcon">
      <el-button round icon="el-icon-download" style="color:#0064e4;border-color:#0064e4">导出</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'common-title',
  props: {
    title: {
      type: String
    },
    suffixIcon: {
      type: Boolean,
      default: false
    },
    slotStr: Boolean
  },
  data () {
    return {

    }
  },
  methods: {
    output () { }
  }
}
</script>
<style scoped>
.common-title {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.common-title__left {
  display: flex;
  align-items: center;
}
.common-title__square {
  width: 12px;
  height: 24px;
  background: #0064e4;
  margin-right: 12px;
}
.common-title__slot {
  color: #0064e4;
}
</style>
